import React, {useEffect} from 'react';
import {connect, history} from 'umi';
import {Card} from 'antd';
import {RollbackOutlined} from '@ant-design/icons';
import ProcessLine from '../../components/Echarts/processLine';
import styles from './index.less';

function OrderDetail(props: any) {
    const {dispatch, orderDetail} = props;
    const {chargeOrder = {}, chargeProcessMessageVo = []} = orderDetail;
    const {location: {state: {orderId = ''} = {}} = {}} = history;
    console.log('history', history);
    console.log('订单详情', props);
    useEffect(() => {
        dispatch({
            type: 'order/getDetail',
            payload: {
                id: orderId
            }
        })
    }, []);
    return (
        <div>
            <Card
                style={{width: '100%'}}
                title="订单信息"
                extra={<a href="#" onClick={() => history.back()}>返回 <RollbackOutlined/></a>}
            >
                <div className={styles.detailWrap}>
                    <div className={styles.singleLine}>
                        <div className={styles.block}>
                            <span className={styles.label}>订单编号: </span>
                            {chargeOrder?.orderNum}
                        </div>
                        <div className={styles.block}>
                            <span className={styles.label}>充电桩编号: </span>
                            {chargeOrder?.pileCode}
                        </div>
                    </div>
                    <div className={styles.singleLine}>
                        <div className={styles.block}>
                            <span className={styles.label}>枪号: </span>
                            {chargeOrder?.gunCode}
                        </div>
                        <div className={styles.block}>
                            <span className={styles.label}>订单状态: </span>
                            {chargeOrder?.status === 0 ? '充电中' : chargeOrder?.status === 1 ? '已完成' : '启动失败'}
                        </div>
                    </div>
                    <div className={styles.singleLine}>
                        <div className={styles.block}>
                            <span className={styles.label}>充电时长: </span>
                            {chargeOrder?.duration || ''}分钟
                        </div>
                        <div className={styles.block}>
                            <span className={styles.label}>充电电量: </span>
                            {chargeOrder?.chargeCapacity || '0.00'}度
                        </div>
                    </div>
                    <div className={styles.singleLine}>
                        <div className={styles.block}>
                            <span className={styles.label}>充电开始时间: </span>
                            {chargeOrder?.startTime}
                        </div>
                        <div className={styles.block}>
                            <span className={styles.label}>充电结束时间: </span>
                            {chargeOrder?.endTime}
                        </div>
                    </div>
                    <div className={styles.singleLine}>
                        <div className={styles.block}>
                            <span className={styles.label}>开始soc: </span>
                            {chargeOrder?.startSoc}%
                        </div>
                        <div className={styles.block}>
                            <span className={styles.label}>结束soc: </span>
                            {chargeOrder?.endSoc}%
                        </div>
                    </div>
                    <div className={styles.singleLine}>
                        <div className={styles.block}>
                            <span className={styles.label}>vin: </span>
                            {chargeOrder?.vin}
                        </div>
                        <div className={styles.block}>
                            <span className={styles.label}>结束原因: </span>
                            {chargeOrder?.stopReason}
                        </div>
                    </div>
                </div>
            </Card>
            <br/>
            <Card
                style={{width: '100%'}}
                title="充电过程信息(一)"
            >
                <ProcessLine isOne={true} lineData={chargeProcessMessageVo} />
            </Card>
            <br/>
            <Card
                style={{width: '100%'}}
                title="充电过程信息(二)"
            >
                <ProcessLine lineData={chargeProcessMessageVo} />
            </Card>
        </div>
    )
}

export default connect(({order}) => {
    return {...order}
})(OrderDetail)
